<template>
  <el-dialog :visible="diagram" class="eldialog" width="95%" style="margin-left: 210px" :before-close="closewindow">
    <div>
      <div class="solidone">认证详细信息</div>
    </div>
    <div class="detailbigbox">
      <div class="approve-detail" style=" color: #3064fc;">审批历史:</div>
      <div class="approve">
        <div class="approve-status" style="display: flex;justify-content: space-around;">
          <div style="display: flex;">
            审批状态:
            <span v-if="this.companydata.approvalStatus === 0">待认证</span>
            <span v-if="this.companydata.approvalStatus === 1">已通过</span>
            <span v-if="this.companydata.approvalStatus === 2">已拒绝</span>
            <span v-if="this.companydata.approvalStatus === 3">认证中</span>
          </div>
          <div style="display: flex;">审批意见：<span>{{ companydata.approvalOpinion }}</span></div>
          <div style="display: flex;">审批时间：<span>{{ companydata.approvalTime | dateFormat }}</span></div>
          <div style="display: flex;">
            审批员：<span>{{ companydata.approver }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="company-box">
      <div class="company-detail" style=" color: #3064fc;">企业认证详情:</div>
      <div class="company">
        <div class="company-childfirst">
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              组织名称
            </div>
            <el-input type="text" disabled v-model="companydata.qyName"></el-input>
          </div>
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              统一社会信用代码
            </div>
            <el-input type="text" disabled v-model="companydata.unifiedSocialCreditCode"></el-input>
          </div>
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              联系人姓名
            </div>
            <el-input type="text" disabled v-model="companydata.contactName"></el-input>
          </div>
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              联系人手机号
            </div>
            <el-input type="text" disabled v-model="companydata
              .phone"></el-input>
          </div>
        </div>
        <div class="company-childfirst">
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  margin-top: -30px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              联系人邮箱
            </div>
            <el-input type="text" disabled v-model="companydata.email"></el-input>
          </div>
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  margin-top: -30px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              组织办公地址
            </div>
            <el-input type="text" disabled v-model="companydata.officeAddress"></el-input>
          </div>
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  margin-top: -30px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              组织办公详细地址
            </div>
            <el-input type="text" disabled v-model="companydata.officeDetailAddress"></el-input>
          </div>
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  margin-top: -30px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              固定电话
            </div>
            <el-input type="text" disabled v-model="companydata.fixedLinePhone"></el-input>
          </div>
        </div>
        <div class="company-childfirst">
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  margin-top: -30px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              组织注册区域
            </div>
            <el-input type="text" disabled v-model="companydata.officeRegisterAddress"></el-input>
          </div>
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  margin-top: -30px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              组织注册详细地址
            </div>
            <el-input type="text" disabled v-model="companydata.officeDetailRegisterAddress"></el-input>
          </div>
          <div class="company-childone">
            <div style="
                  margin-bottom: 10px;
                  margin-top: -30px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              组织网站
            </div>
            <el-input type="text" disabled v-model="companydata.qyUrl"></el-input>
          </div>
          <div class="company-childone" style="visibility: hidden;">
            <div style="
                  margin-bottom: 10px;
                  margin-top: -30px;
                  color: #5a5f6f;
                  font-weight: bold;
                  font-size: 15px;
                ">
              固定电话
            </div>
            <el-input type="text" disabled v-model="companydata.fixedLinePhone"></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="uploadimgbox">
      <div class="approve-detail" style="color: #3064fc;">上传图片:</div>
      <div class="uploadimg">
        <div class="loadimgbox">
          <div class="w">
            <div class="imgboxchildone">

              <div class="imgbox">
                <el-image style="width: 200px; height: 200px" :src="worker + img[0]" :preview-src-list="proview"
                  preview-size="300px,400px" :fit="''" :placeholder="''">
                </el-image>
                <el-image style="width: 200px; height: 200px" :src="worker + img[1]" :preview-src-list="proview"
                  preview-size="600px,400px"  placeholder="">
                </el-image>
                <el-image style="width: 200px; height: 200px" :src="worker + img[2]" :preview-src-list="proview"
                  preview-size="600px,400px"  :show-error="false">
                </el-image>
                <el-image style="width: 200px; height: 200px" :src="worker + img[3]" :preview-src-list="proview"
                  preview-size="300px,300px"  :show-error="false">
                </el-image>
                <el-image style="width: 200px; height: 200px" :src="worker + img[4]" :preview-src-list="proview"
                  preview-size="600px,400px"  :show-error="false">
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { selectDetails, getuserList } from "@/api/user";
export default {
  data() {
    return {
      input: "",
      diagram: false,
      companydata: {},
      tableData: [],
      file: [],
      proview: [],
      img: [],
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      userId: '',
      worker: "http://gxj.lanzhou.gov.cn:8830/zxqyfw/pub/fileUploadRecord/preview?fileId=",
    };
  },
  methods: {
    closewindow() {
      this.diagram = false;
    },
    openmessage(id) {
      this.userId = id
      this.diagram = true;
      // 首先获取认证详情
      this.$parent.$parent.getuserList()
      selectDetails({ id: this.userId }).then((res) => {
        if (res.data.state === 20000) {
          this.companydata = res.data.data;
          console.log(this.companydata);
          // 然后再根据 fileId 获取文件信息
          if (this.companydata.fileId) {
            this.file = [this.companydata.fileId]
            this.proview = this.file[0].split(',').map((fileId) => {
              return this.worker + fileId;
            });
            this.img = this.file[0].split(',')
          }
        } else {
          this.$message.error('获取认证详情失败请稍后重试')
          this.diagram = false
        }
      });
    },
    omwindow() {
      this.$parent.getuserList()

    }
  },
};
</script>

<style lang="scss">
.el-image__error {
  display: none;
}
.el-image-viewer__img {}

.solidone {
  margin-top: -50px;
  // text-align: center;
  line-height: 60px;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #3064fc;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1e2948;
}

.detailbigbox {
  margin-top: 30px;

  .approve {
    overflow: hidden;
    margin-top: 10px;
    width: 100%;
    height: 79px;
    // margin-top: 40px;
    background: #f4f8fc;
    border: 1px solid #d8e0f8;
    border-radius: 5px 5px 5px 5px;

    .approve-detail {
      width: 100px;
    }

    .approve-status {
      margin-top: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      span {
        color: #3064fc;
      }
    }
  }
}

.company-box {
  margin-top: 30px;

  .company {
    overflow: hidden;
    width: 100%;
    height: 340px;
    margin-top: 10px;
    background: #f4f8fc;
    border: 1px solid #d8e0f8;
    // overflow: hidden;
    border-radius: 5px;

    .company-detail {
      position: absolute;
      width: 100px;
      color: #3064fc;
      z-index: 999;
    }

    .company-childfirst {
      display: flex;
      justify-content: space-between;
      padding: 30px 0px 30px 10px;
      width: 99%;
      // height: 100%;
      margin: auto;

      input {
        width: 240px;
      }
    }

    .company-second {
      display: flex;
      justify-content: space-between;
      padding: 30px 0px 30px 10px;
      width: 99%;

      input {
        width: 240px;
      }

      .company-secondone {
        margin-left: 29px;
      }

      .company-secondtwo {
        // margin-left: 60px;
      }
    }
  }
}

.uploadimgbox {
  margin-top: 30px;

  .uploadimg {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 254px;
    margin-top: 10px;
    background: #f4f8fc;
    border: 1px solid #d8e0f8;
    border-radius: 5px;

    // .approve-detail {
    //   position: absolute;
    //   top: -8%;
    //   left: 4%;
    //   width: 100px;
    //   color: #3064fc;
    //   z-index: 999;
    // }

    .loadimgbox {
      .w {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 254px;
        margin: auto;

        .imgboxchildone {
          position: relative;
          // padding-left: 40px;
          width: 100%;
          height: 180px;

          .imgbox {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .littleone {
            position: absolute;
            bottom: -40px;
            left: 54%
          }
        }
      }
    }
  }
}
</style>